import React, { PureComponent } from 'react';
import styles from './index.less';
import { Menu, Icon, Badge } from 'antd';

const { SubMenu } = Menu;

export default class TopMenu extends PureComponent {
  render() {
    const { menuData, onTopMenu, currentMenu, menuBadge } = this.props;
    let authority = localStorage.getItem('antd-pro-authority');
    // 再进行一层处理
    menuData.map(item => {
      let iAuthority = typeof item.authority == 'string' ? [item.authority] : item.authority;
      if (item.authority != undefined) {
        let res = iAuthority.filter(subItem => JSON.parse(authority).indexOf(subItem) !== -1);
        item.show = res.length > 0 ? true : false;
      } else {
        // 当前不受控
        item.show = true;
      }
    });

    if (menuBadge != null) {
      for (let key in menuBadge) {
        menuData.map(item => {
          if (item.path == '/' + key) {
            item.count = menuBadge[key].total;
          }
        });
      }
    }

    return (
      <div className={styles.topmenu}>
        <Menu
          theme="dark"
          mode="horizontal"
          selectedKeys={[`${currentMenu}`]}
          style={{ lineHeight: '64px', width: '100%' }}
          onClick={i => onTopMenu(i)}
        >
          {menuData.map(
            (item, index) =>
              item.hideInMenu || !item.show ? (
                ''
              ) : (
                <Menu.Item key={index}>
                  <Icon type={item.icon} />
                  <span>{item.name}</span>
                  <Badge
                    count={item.count}
                    style={{
                      marginLeft: 15,
                      minWidth: 25,
                      height: 15,
                      lineHeight: '15px',
                      backgroundColor: '#f50',
                    }}
                  />
                </Menu.Item>
              )
          )}
        </Menu>
      </div>
    );
  }
}
